<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/highchars.js" ></script>
		<style>
			.menu_one>li>a{
				font-size: 16px;
			    display: block;
			}
			.menu_one>.active>a{
				padding: 10px 15px;
				color: #fff;
				background-color: #428bca;
				border-radius: 4px;
			}
			.menu_second>li{
				padding-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
		  	<div class="row">
				<div class="col-md-2">
					<ul class="nav nav-pills nav-stacked menu_one">
						<li role="presentation" class="active">
							<a href="javascript:changeSet('js/data.json');">user</a>
							<ul class="nav nav-pills nav-stacked menu_second">
								<li role="presentation"><a href="javascript:changeSet('js/data2.json');">userinfo</a></li>
								<li role="presentation"><a href="javascript:changeSet('js/data2.json');">address</a></li>
							</ul>
						</li>
						<li role="presentation">
							<a href="javascript:changeSet('js/data.json');">oth</a>
							<ul class="nav nav-pills nav-stacked menu_second">
								<li role="presentation"><a href="javascript:changeSet('js/data2.json');">othaa</a></li>
								<li role="presentation"><a href="javascript:changeSet('js/data2.json');">othbb</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="col-md-10">
					<div class="row clearfix">
						<div class="col-md-12 column height-400" id="main"></div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var tdata = {
				'timename':'2019-03-29',
				'sone': [[1553833500000,17],[1553833800000,55],[1553838600000,6],[1553839200000,17],[1553839500000,20],[1553839800000,15],[1553840100000,10]]
			};
			var onmenu = $('.menu_one .active>a').html()
			console.log( tdata.sone,onmenu)
			//初始化
			var chart = Highcharts.chart('main',{
				chart: {
					type: 'spline'
				},
				title: {
					text: tdata.timename+' '+onmenu+' 请求量曲线'
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					type: 'datetime',
					dateTimeLabelFormats: { 
						hour: '%H:%M'
					}
				},
				yAxis: {
					title: {
						text: '请求量(次/5分钟)'
					},
					min: 0
				},
				tooltip: {   
					formatter: function() {
						return '<p style="color:'+this.series.color+';font-weight:bold;">'
						+ this.series.name + 
						'</p><br /><p style="color:'+this.series.color+';font-weight:bold;">时间：' + Highcharts.dateFormat('%m月%d日 %H:%M', this.x) + 
						'</p><br /><p style="color:'+this.series.color+';font-weight:bold;">数量：'+ this.y + '</p>';
					}
				},
				credits: {
					enabled: false,
				},
				series: [
					{
					    name: '成功曲线',
						data: tdata.sone,
						lineWidth: 2,
						marker:{
							radius: 1
						},
						pointInterval: 300*1000
					},
					{
					    name: '失败曲线',
						data: tdata.fail,
						lineWidth: 2,
						marker:{
							radius: 1
						},
						pointInterval: 300*1000,
						color : '#9C0D0D'
					},
//					{
//						name: '失败曲线',
//						data: [
//							[1553788800000,0],[1553789100000,0],[1553789400000,0],[1553789700000,0],[1553790000000,0],[1553790300000,0],[1553790600000,0],[1553790900000,0],[1553791200000,0],[1553791500000,0],[1553791800000,0],[1553792100000,0],[1553792400000,0],[1553792700000,0],[1553793000000,0],[1553793300000,0],[1553793600000,0],[1553793900000,0],[1553794200000,0],[1553794500000,0],[1553794800000,0],[1553795100000,0],[1553795400000,0],[1553795700000,0],[1553796000000,0],[1553796300000,0],[1553796600000,0],[1553796900000,0],[1553797200000,0],[1553797500000,0],[1553797800000,0],[1553798100000,0],[1553798400000,0],[1553798700000,0],[1553799000000,0],[1553799300000,0],[1553799600000,0],[1553799900000,0],[1553800200000,0],[1553800500000,0],[1553800800000,0],[1553801100000,0],[1553801400000,0],[1553801700000,0],[1553802000000,0],[1553802300000,0],[1553802600000,0],[1553802900000,0],[1553803200000,0],[1553803500000,0],[1553803800000,0],[1553804100000,0],[1553804400000,0],[1553804700000,0],[1553805000000,0],[1553805300000,0],[1553805600000,0],[1553805900000,0],[1553806200000,0],[1553806500000,0],[1553806800000,0],[1553807100000,0],[1553807400000,0],[1553807700000,0],[1553808000000,0],[1553808300000,0],[1553808600000,0],[1553808900000,0],[1553809200000,0],[1553809500000,0],[1553809800000,0],[1553810100000,0],[1553810400000,0],[1553810700000,0],[1553811000000,0],[1553811300000,0],[1553811600000,0],[1553811900000,0],[1553812200000,0],[1553812500000,0],[1553812800000,0],[1553813100000,0],[1553813400000,0],[1553813700000,0],[1553814000000,0],[1553814300000,0],[1553814600000,0],[1553814900000,0],[1553815200000,0],[1553815500000,0],[1553815800000,0],[1553816100000,0],[1553816400000,0],[1553816700000,0],[1553817000000,0],[1553817300000,0],[1553817600000,0],[1553817900000,0],[1553818200000,0],[1553818500000,0],[1553818800000,0],[1553819100000,0],[1553819400000,0],[1553819700000,0],[1553820000000,0],[1553820300000,0],[1553820600000,0],[1553820900000,0],[1553821200000,0],[1553821500000,0],[1553821800000,0],[1553822100000,0],[1553822400000,0],[1553822700000,0],[1553823000000,0],[1553823300000,0],[1553823600000,0],[1553823900000,0],[1553824200000,0],[1553824500000,0],[1553824800000,0],[1553825100000,0],[1553825400000,0],[1553825700000,0],[1553826000000,0],[1553826300000,0],[1553826600000,0],[1553826900000,0],[1553827200000,0],[1553827500000,0],[1553827800000,0],[1553828100000,0],[1553828400000,0],[1553828700000,0],[1553829000000,0],[1553829300000,0],[1553829600000,0],[1553829900000,0],[1553830200000,0],[1553830500000,0],[1553830800000,0],[1553831100000,0],[1553831400000,0],[1553831700000,0],[1553832000000,0],[1553832300000,0],[1553832600000,0],[1553832900000,0],[1553833200000,0],[1553833500000,0],[1553833800000,0],[1553834100000,0],[1553834400000,0],[1553834700000,0],[1553835000000,0],[1553835300000,0],[1553835600000,0],[1553835900000,0],[1553836200000,0],[1553836500000,0],[1553836800000,0],[1553837100000,0],[1553837400000,0],[1553837700000,0],[1553838000000,0],[1553838300000,0],[1553838600000,0],[1553838900000,0],[1553839200000,0],[1553839500000,0],[1553839800000,0],[1553840100000,0],[1553840400000,0],[1553840700000,0],[1553841000000,0],[1553841300000,0],[1553841600000,0],[1553841900000,0],[1553842200000,0],[1553842500000,0],[1553842800000,0],[1553843100000,0],[1553843400000,0],[1553843700000,0],[1553844000000,0],[1553844300000,0],[1553844600000,0],[1553844900000,0],[1553845200000,0],[1553845500000,0],[1553845800000,0],[1553846100000,0],[1553846400000,0],[1553846700000,0],[1553847000000,0],[1553847300000,0],[1553847600000,0],[1553847900000,0],[1553848200000,0],[1553848500000,0],[1553848800000,0],[1553849100000,0],[1553849400000,0],[1553849700000,0],[1553850000000,0],[1553850300000,0],[1553850600000,0],[1553850900000,0],[1553851200000,0],[1553851500000,0],[1553851800000,0],[1553852100000,0],[1553852400000,0],[1553852700000,0],[1553853000000,0],[1553853300000,0],[1553853600000,0],[1553853900000,0],[1553854200000,0],[1553854500000,0],[1553854800000,0],[1553855100000,0],[1553855400000,0],[1553855700000,0],[1553856000000,0],[1553856300000,0],[1553856600000,0],[1553856900000,0],[1553857200000,0],[1553857500000,0],[1553857800000,0],[1553858100000,0],[1553858400000,0],[1553858700000,0],[1553859000000,0],[1553859300000,0],[1553859600000,0],[1553859900000,0],[1553860200000,0],[1553860500000,0],[1553860800000,0],[1553861100000,0],[1553861400000,0],[1553861700000,0],[1553862000000,0],[1553862300000,0],[1553862600000,0],[1553862900000,0],[1553863200000,0],[1553863500000,0],[1553863800000,0],[1553864100000,0],[1553864400000,0],[1553864700000,0],[1553865000000,0],[1553865300000,0],[1553865600000,0],[1553865900000,0],[1553866200000,0],[1553866500000,0],[1553866800000,0],[1553867100000,0],[1553867400000,0],[1553867700000,0],[1553868000000,0],[1553868300000,0],[1553868600000,0],[1553868900000,0],[1553869200000,0],[1553869500000,0],[1553869800000,0],[1553870100000,0],[1553870400000,0],[1553870700000,0],[1553871000000,0],[1553871300000,0],[1553871600000,0],[1553871900000,0],[1553872200000,0],[1553872500000,0],[1553872800000,0],[1553873100000,0],[1553873400000,0],[1553873700000,0],[1553874000000,0],[1553874300000,0],[1553874600000,0],[1553874900000,0]						],
//						lineWidth: 2,
//						marker:{
//							radius: 1
//						},
//						pointInterval: 300*1000,
//						color : '#9C0D0D'
//					}
				]
			});
			
			$(function(){
				//一级菜单
				$('.menu_one>li>a').click(function(){
					var index = $(this).parent('li').index()
					$('.menu_one .active').removeClass('active')
					$('.menu_one>li').eq(index).addClass('active')
				});
				//二级菜单
				$('.menu_second>li').click(function(){
					$('.menu_one .active').removeClass('active')
					$(this).addClass('active')
				});
			})
			//更新数据
			function changeSet(val){
				$.ajax({ 
					url: val, 
					data: {},
					dataType: "json",
		            success: function(data){
		                console.log(data)
		                chart.series[0].update({
					    	data: data.sone
					    });
						chart.series[1].update({
					    	data: data.fail
					    });
		            },
		            error: function(error){
		                console.log(error);
		            }
				})
			}
		</script>
	</body>
</html>
